<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/index.css"/>
</head>
<body>
<ul class="hover-tips">
	<li data-name="姨妈红"></li>
	<li data-name="基佬紫"></li>
	<li data-name="箩底橙"></li>
	<li data-name="姣婆蓝"></li>
	<li data-name="大粪青"></li>
	<li data-name="原谅绿"></li>
</ul>
<a href="###"></a>
<a href="###"></a>
<a href="###"></a>
<a href="###"></a>

<div class="state-ball" style="--offset: 0;">
    <div class="wave"></div>
    <div class="progress"></div>
</div>

<div class="box">
	<textarea  id=""  rows="10" v-model="val"></textarea>
	<div id="boxid" class="text" v-text="val" ></div>
	<button @click="btn">按钮</button>
</div>


<script type="text/javascript">
	
moreline(id,rows,str){
	var boxid = document.getElementById(id);
	var computedStyle = document.defaultView.getComputedStyle(boxid,null);
	var lineHeight = computedStyle.lineHeight;
	var top = rows*parseInt(lineHeight);
	var tempstr = str;
	boxid.innerHTML = tempstr;
	var len = tempstr.length;
	var i = 0;
	if(boxid.offsetHeight<=top){
		
	}else{
		var temp = "";
		boxid.innerHTML = temp;
		while(boxid.offsetHeight<=top){
			temp = tempstr.substring(0,i+1);
			i++;
			boxid.innerHTML = temp;
		}
		var slen = temp.length;
		tempstr = temp.substring(0,slen-1);
		len = tempstr.length;
		boxid.innerHTML = tempstr.substring(0,len-1)+"...";
		boxid.height = top+"rem";
	}
}
</script>
</body>
</html>
